<template>
  <div  style="background: linear-gradient(to bottom, white 40%, #d3e2f0 100%);width:100%;height:100%">
    <van-form>
      <div class="star-title">整治形式主义为基层减负工作调查问卷</div>
      <div class="gender-select">
        <div class="label">1、您的性别</div>
        <van-radio-group direction="horizontal" v-model="sex" @click="selectScore">
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
      </div>
      <div class="gender-select">
        <div class="label">2、您的年龄段</div>
        <van-radio-group direction="horizontal" v-model="age" @click="selectScore">
          <van-radio name="1">30岁以下</van-radio>
          <van-radio name="2">31岁-40岁</van-radio>
          <van-radio name="3">41岁-50岁</van-radio>
          <van-radio name="4">51岁及以上</van-radio>
        </van-radio-group>
      </div>
      <div class="gender-select">
        <div class="label">3、您的学历层次</div>
        <van-radio-group direction="horizontal" v-model="edu" @click="selectScore">
          <van-radio name="1">高中、职高或中专及以下</van-radio>
          <van-radio name="2">本科或大专</van-radio>
          <van-radio name="3">研究生</van-radio>
          <van-radio name="4">其他</van-radio>
        </van-radio-group>
      </div>
      <div class="gender-select">
        <div class="label">4、您的职业类别</div>
        <van-radio-group direction="horizontal" v-model="career" @click="selectScore">
          <van-radio name="1">教师</van-radio>
          <van-radio name="2">医生</van-radio>
          <van-radio name="3">行政机关人员</van-radio>
          <van-radio name="4">事业单位人员</van-radio>
          <van-radio name="5">企业人员</van-radio>
          <van-radio name="6">其他</van-radio>
        </van-radio-group>
      </div>
      <div class="gender-select">
        <div class="label">5、您所在的单位</div>
        <van-radio-group direction="horizontal" v-model="dept" @click="selectScore">
          <van-radio name="1">自治区部门单位</van-radio>
          <van-radio name="2">地州市单位</van-radio>
          <van-radio name="3">县市区单位</van-radio>
          <van-radio name="4">乡镇（街道）或村（社区）</van-radio>
          <van-radio name="5">其他</van-radio>
        </van-radio-group>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router'

const sex = ref('')
const age = ref('')
const edu = ref('')
const career = ref('')
const dept = ref('')

const selectScore = () => {
  if (sex.value === '' || age.value === '' || edu.value === '' || career.value === '' || dept.value === '') {
    return
  }

  let questionid = ''

  if (dept.value === '1') {
    questionid = '01J282PYTQRPKG0VJ8HP0VT03Y'
  } else if (dept.value === '2' || dept.value === '3') {
    questionid = '01J29BMDY6AB6WGBN6WV35MZZF'
  } else {
    questionid = '01J29BV3WEHCJFEC0DZWCB7F7Y'
  }

  router.replace({
    name: 'commonPublishForm',
    query: {
      id: questionid,
      sex: sex.value,
      age: age.value,
      edu: edu.value,
      career: career.value,
      dept: dept.value
    }
  })
}
</script>

<style scoped>
body {
  background: white;
  display: flex;
  justify-content: center;
}
.van-form {
  padding: 10px 10px 10px 10px;
  max-width: 980px;
  margin: 0 auto;
}
.star-title{
  font-size: 22px;
  text-align: center;
  margin-bottom: 20px;
}
.gender-select {
  margin-top: 15px;
}
.van-radio {
  margin-top: 15px;
}
</style>
